<template>
  <div class="form-setting-panel form-ql-editor">
    <!--富文本编辑器 -->
    <div class="form-setting-group form-setting-group-small form-common-setting">
      <div class="form-common-setting-panel">
        <h4 class="form-item-title">{{ setting.name }}</h4>
      </div>
      <!-- TODO 老的富文本支不支持多语言包能力 -->
      <base-editor :key="baseEditorKey" ref="BaseEditorComponent" :placeholder="placeHolder" v-model="field.placeHolder" @input="getInput" :toolbarOptions="toolbarOptions" :maxLength="maxLength"></base-editor>
    </div>
    <div class="form-setting-group">
      <p class="form-item-text-msg">{{$t('common.form.tip.info.tips2')}}</p>
    </div>
    <!-- 是否对客户可见 -->
    <form-visible-customer-setting :field="field" @input="update" v-if="isShowVisibleCustomer" form-control-type="info"></form-visible-customer-setting>

  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';
import { toolbarOptions } from './editorOption';
import {INFO_FIELD_LENGTH_MAX} from '../../config';
import {PLACE_HOLDER} from './config';

import { randomString } from 'pub-bbx-utils'

export default {
  name: 'form-info-setting',
  mixins: [SettingMixin],
  props: {
    ...settingProps,
    placeHolder: {
      type: String,
      default: PLACE_HOLDER
    },
    maxLength: {
      type: Number,
      default: INFO_FIELD_LENGTH_MAX
    }
  },
  data() {
    return {
      baseEditorKey: randomString()
    }
  },
  computed:{
    toolbarOptions(){
      return toolbarOptions
    }
  },
  watch: {
    field() {
      this.$nextTick(() => {
        this.baseEditorKey = randomString()
      })
    }
  },
  methods: {
    // 获取带格式的文章内容
    getInput (html) {
      this.update(html, 'placeHolder');
    },
    updateForDom (event) {
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;
      
      this.update(value, prop);
    },
    update (value, prop) {
      this.$emit('input', { value, prop })
    }
  }
}
</script>
<style lang="scss">
@import './FormInfo.scss';
.form-ql-editor{
  .form-item-text-msg{
    color: #666666;
    font-size: 12px;
    line-height: 17px;
    margin-block-start: 0em;
    margin-block-end: 0em;
  }
  .form-item-msg-img{
    width: 90%;
    display: flex;
    flex: 1;
  }

}
</style>
